<template>
    <el-row class="info">

<!-- 左侧 -->
<el-col :span="20">
  <span v-if="!isCompany">
  {{data.name}}
</span>
<strong v-else>
  {{data.name}}
</strong>
</el-col>

<!-- 右侧 -->
<el-col :span="4">
  <el-row type="flex">
    <el-col>{{data.manager}}</el-col>

    <el-col>
      <!-- 操作下拉菜单 -->
      <el-dropdown>
        <!-- 看得见的部分 -->
        <span class="dropdown-btn">操作 <i class="el-icon-arrow-down"/></span>

        <!-- 下拉显示菜单部分   -->
        <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click.native="showDialog">添加子部门</el-dropdown-item>
        <el-dropdown-item v-if="!isCompany" @click.native="EidtshowDialog">编辑部门</el-dropdown-item>
        <el-dropdown-item v-if="!isCompany" @click.native="delshowDialog">删除部门</el-dropdown-item>
      </el-dropdown-menu>
    </template>
      </el-dropdown>
    </el-col>
  </el-row>
</el-col>
</el-row>
</template>

<script>
import {deleteDepartment} from '@/api/department'
export default {
props:{
  data:{
    type:Object,
    require:true
  },
  isCompany:{
    type:Boolean,
    default:false
  }
},
methods:{
  // 新增
  showDialog(){
    console.log('树形内下拉被点击')
    // 这个组件是部门的渲染行组件，有自己的部门数据
    // 可以再点击时往外传，方便弹窗知道现在是哪个被点击
    this.$emit('showDialog',this.data)
  },
  // 编辑
  // 数据回填
  EidtshowDialog(){
    // 弹窗
    this.$emit('EidtshowDialog',this.data)
  },

  // 删除部门
 async delshowDialog(){
  try { // 二次询问
        await this.$confirm('是否确认删除?')
        // 发请求
        console.log(this.data)
        await deleteDepartment(this.data.id)
        // 提醒用户
        this.$message.success('操作成功')
        // 更新数据(部门树形数据, 通知父页面列表更新)
        this.$emit('reload')
      } catch (error) {
        console.log(error)
      }
 
  }
}
}
</script>

<style>

</style>